<template>
    <div class="carsouelDetail">
        <p class="header_detail">轮播大图</p>
        <!-- 添加图片 -->

        <div class="detail_header">
            <p class="detail_explain">· 添加图片，建议图片尺寸为宽750像素，最高不超过1536像素；</p>
            <p class="detail_explain">· 要求一组内的图片高度必须一致；</p>
            <p class="detail_explain">· 大小不超过300KB；</p>
        </div>
        <div class="detail_content">
            <ul>
                <li v-for="(item,index) in imgList" :key="index">
                    <div class="imgBox">
                        <div class="left">
                            <div class="left_btns">
                                <p class="top_btn" :class="{'noClick':index==0}" @click='goUpStep(index,true)'>
                                    <img v-if='index==0'  src="@/assets/img/editContent/icon-pic-up-not.png" alt="">
                                    <img v-else src="@/assets/img/editContent/icon-pic-up-nor.png" alt="">
                                </p>
                                <p @click='goUpStep(index,false)' :class="{'noClick':index==imgList.length-1}">
                                    <img v-if='index==imgList.length-1' src="@/assets/img/editContent/icon-pic-down-not.png" alt="">
                                    <img v-else src="@/assets/img/editContent/icon-pic-down-nor.png" alt="">
                                </p>
                            </div>
                            <div class="left_imgs" @click="getIndex(index)">
                                <el-upload
                                    class="avatar-uploader"
                                    action="#"
                                    :auto-upload="false"
                                    :show-file-list="false"
                                    :on-change="getImg"
                                    :on-remove="handleRemove"
                                    :http-request="uploadImg"
                                >
                                    <img
                                        v-if="imgList[index].imageUrl"
                                        :src="imgList[index].imageUrl"
                                        class="avatar"
                                    />
                                    <i v-else class="el-icon-plus avatar-uploader-icon">
                                        <span class="upload_text">添加图片</span>
                                    </i>
                                    <div class="img_loading" v-if="imgList[index].imageUrl">
                                        <p>更换图片</p>
                                    </div>
                                </el-upload>
                            </div>
                        </div>
                        <div class="jumpUrlBox">
                              <p>
                            <span>微信小程序链接（选填）</span>
                            <!-- <el-input @change="toParent" ></el-input> -->
                                <c-linkselect v-model="imgList[index].wxJumpUrl"  @change="toParent"></c-linkselect >
                                
                             </p>
                        </div>
                        <div class="right" @click="deleteRow(index)"></div>
                    </div>
                </li>
            </ul>
            <div class="addBtns" @click="addRow">
                <span>添加广告图({{imgList.length}}/10)</span>
            </div>
        </div>
        <div class="detail">
            <el-form ref="form" label-position="top" :model="data">
                <el-form-item>
                    <p class="form_title">
                        自动滚动时间
                        <span>(0为不自动滚动，最大5秒)</span>
                    </p>
                    <el-slider v-model="data.time" show-input :max="5" @change="toParent" :step="1"></el-slider>
                </el-form-item>
                <el-form-item>
                    <!-- <el-radio-group v-model="data.carouselType" @change='toParent'>
                        <el-radio label="normal">样式一</el-radio>
                        <el-radio label="card">样式二</el-radio>
                    </el-radio-group>-->
                    <p class="form_title">
                        轮播指示器
                        <span></span>
                    </p>
                    <el-col :span="12">
                        <div
                            @click="changeCarouselType(1)"
                            class="carouselType carouselType1"
                            :class="{'activeType1': data.carouselType == 1}"
                        >
                            <p class="react_type"></p>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div
                            @click="changeCarouselType(2)"
                            class="carouselType carouselType2"
                            :class="{'activeType2': data.carouselType == 2}"
                        >
                            <p class="react_type"></p>
                        </div>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <p class="form_title">
                        上边框距离
                        <span>(0为贴合，最大100像素)</span>
                    </p>
                    <el-slider
                        v-model="data.paddingTop"
                        show-input
                        :max="100"
                        :step="1"
                        @change="toParent"
                    ></el-slider>
                </el-form-item>
                <el-form-item>
                    <p class="form_title">
                        下边框距离
                        <span>(0为贴合，最大100像素)</span>
                    </p>
                    <el-slider
                        v-model="data.paddingBottom"
                        show-input
                        :max="100"
                        :step="1"
                        @change="toParent"
                    ></el-slider>
                </el-form-item>
            </el-form>
            <!-- <el-button @click='toParent'>测试保存</el-button> -->
        </div>
        <div class="eventBus">
            <p class="event_title">事件（选填）</p>
            <el-input @change="toParent" v-model="data.event" :disabled="data.eventChecked" placeholder="请输入事件ID"></el-input>
        </div>
    </div>
</template>

<script>
import {  uploadImg } from 'api/upload'
export default {
    data() {
        return {
            data: {
                carouselType: 1
            },
            imgList: [],
            time: 0,
            imgHeight: 200,
            activeUploadIndex: 0
        };
    },
    props: {
        propData: {
            type: Object
        }
    },
    methods: {
        // 更改指示器样式
        changeCarouselType(val) {
            this.data.carouselType = val;
            this.toParent();
        },
        // 获取当前点击的upload
        getIndex(index) {
            if (this.activeUploadIndex == index) {
                return;
            }
            this.activeUploadIndex = index;
        },
        uploadImg() {},
        handleRemove() {},
        getImg(val) {
            let that = this;
            let infoId = this.$route.query.id;
            var file = val.raw;
            var formdata=new FormData();// 创建form对象
            formdata.append('file',file,file.name);
            uploadImg(formdata).then(res=>{
               if(res){ //返回的imgSrc
                    var image = new Image()
                    image.src = res;
                    that.imgList[that.activeUploadIndex].imageUrl = res;
                    image.onload = function() {
                        var naturalWidth = image.width;
                        var naturalHeight = (image.height * 375) / naturalWidth;
                        that.imgList[that.activeUploadIndex].naturalHeight = naturalHeight;
                        that.toParent();
                    };
               }
            })
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        goUpStep(index, bool) {
            //向上 ，向下 bool:true-上 false:下
            let index1, index2;
            if (bool) {
                //向上
                if (index == 0) {
                    return;
                }
                index1 = index;
                index2 = index1 - 1;
            } else {
                //向下
                if (index == this.imgList.length - 1) {
                    return;
                }
                index1 = index;
                index2 = index1 + 1;
            }
            this.imgList.splice(
                index2,
                1,
                ...this.imgList.splice(index1, 1, this.imgList[index2])
            );
            this.toParent();
        },
        // 删除
        deleteRow(index) {
            this.imgList.splice(index, 1);
            this.toParent();
        },
        // 添加
        addRow() {
            if (this.imgList.length == 10) {
                return;
            }
            this.imgList.push({
                id: this.imgList.length + 1,
                imageUrl:'',
                jumpUrl:''
            });
            this.toParent();
        },
        toParent() {
            let data = {
                ...this.data,
                imgList: this.imgList
            };
            this.$emit("toParent", data);
        }
    },
    watch: {
        propData: function(val) {
            this.data = JSON.parse(JSON.stringify(this.propData));
        }
    },
    mounted() {
        this.data = JSON.parse(JSON.stringify(this.propData));
        //默认值；
        this.imgList = this.data.imgList || [];
        this.toParent();
        console.log(this.propData, "接收到的参数");
        // debugger;
    }
};
</script>
<style lang="less" scoped>
.carsouelDetail {
    margin-bottom: 80px;
}
.header_detail {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e4e4e4;
    font-size: 16px;
    color: #000000;
    padding-left: 16px;
}
.detail_header {
    padding: 16px 16px 0 16px;
    .detail_explain {
        font-size: 12px;
        line-height: 17px;
        color: #888888;
    }
}
// 轮播图
.detail {
    border-top: 1px solid #e4e4e4;
    padding: 0 0 0 10px;
    .form_title {
        position: relative;
        left: -10px;
        line-height:50px;
        span {
            color: #888888;
        }
    }

    .detail_content {
        width: 100%;
        ul {
            width: 100%;
            height: 100%;
            margin-top: 20px;
        }
        li {
            width: 100%;
            margin-top: 2px;
            background: #f7f7f7;
        }
        .imgBox {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            // align-items: center;
            position: relative;
            padding:10px 0;
            .jumpUrlBox {
                font-size: 14px;
                line-height: 24px;
                margin-right: 16px;
                margin-top: 10px;
            }
            .left {
                width: 150px;
                height: 90px;
                display: flex;
                justify-content: center;
                align-items: center;
                .left_btns {
                    width: 50px;
                    height: 100%;
                    flex-direction: column;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    p{
                        cursor: pointer;
                    }
                    .noClick{
                        cursor:not-allowed;
                    }
                    .top_btn {
                        margin-bottom: 10px;
                    }
                }
                .left_imgs {
                    width: 72px;
                    height: 62px;
                    position: relative;
                    .img_loading {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        background: rgba(0, 0, 0, 0.6);
                        top: 0;
                        font-size: 12px;
                        color: #ffffff;
                        display: none;
                        justify-content: center;
                        align-items: center;
                    }
                    .el-upload:hover .img_loading {
                        display: flex;
                    }
                    .upload_text {
                        font-size: 12px;
                        line-height: 17px;
                    }
                    /deep/ .avatar-uploader .el-upload {
                        border: 1px dashed #ff8244;
                        border-radius: 6px;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                    }
                    /deep/ .avatar-uploader .el-upload:hover {
                        // border-color: #FF8244;
                    }
                    /deep/.avatar-uploader-icon {
                        font-size: 22px;
                        color: #ff8244;
                        width: 62px;
                        height: 62px;
                        // line-height: 98px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                    }
                    /deep/.avatar {
                        width: 62px;
                        height: 62px;
                        display: block;
                    }
                }
            }
            .center {
                width: 250px;
                height: 100px;
            }
            .right {
                width: 14px;
                height: 14px;
                position: absolute;
                top: 8px;
                right: 6px;
                background: url("~@/assets/img/editContent/icon-ashbin-nor.png")
                    center center/14px 14px no-repeat;
                    cursor: pointer;
            }
            .right:hover {
                background: url("~@/assets/img/editContent/icon-ashbin-hov.png")
                    center center/14px 14px no-repeat;
            }
        }
        .addBtns {
            width: calc(100% - 32px);
            margin-left: 16px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #ff8244;
            box-sizing: border-box;
            color: #ff8244;
            font-size: 14px;
            margin-top: 10px;
            margin-bottom: 20px;
            cursor: pointer;
        }
    }
}
.carouselType {
    width: 100%;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e4e4e4;
    box-sizing: border-box;
}
.react_type {
    width: 60px;
    height: 38px;
}
.carouselType1 {
    .react_type {
        background: url("~@/assets/img/editContent/banner-icon-type-circle-nor.png")
            center center/60px 38px no-repeat;
    }
}
.carouselType2 {
    .react_type {
        background: url("~@/assets/img/editContent/banner-icon-type-square-nor.png")
            center center/60px 38px no-repeat;
    }
}
.activeType1,
.activeType2 {
    border: 1px solid #ff8244;
}
.activeType1 .react_type {
    background: url("~@/assets/img/editContent/banner-icon-type-circle-sel.png")
        center center/60px 38px no-repeat;
}
.activeType2 .react_type {
    background: url("~@/assets/img/editContent/banner-icon-type-square-sel.png")
        center center/60px 38px no-repeat;
}
/deep/.el-form-item {
    margin: 0 16px 0 16px;
    height: auto;
    display: block;
}
/deep/.el-slider__bar {
    background-color: #ff8244;
}
/deep/.el-slider__button {
    border: 2px solid #ff8244;
}
.eventBus {
    font-size: 14px;
    padding: 5px 16px 0 16px;
    line-height:40px;
    .event_title {
        // margin-bottom: 10px;
    }
}
</style>